<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<!-- 

脱离文档流：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。这意味着它不再占据原来在文档流中的位置，后面的元素会占据它之前的位置。

宽高自适应：
浮动元素默认宽与高都是被内容撑开（尽可能小），而且可以自由设置宽高。

行内排列：
浮动元素不会独占一行，可以和其他元素共用一行。这使得布局更加灵活。

无margin合并与塌陷：
浮动元素不会与其他元素的margin合并，也不会出现margin塌陷的问题。它能够完美地设置四个方向的margin和padding。

不影响文本处理：
浮动元素不会像行内块元素一样被当做文本处理，因此没有行内块的空白问题。

对兄弟元素的影响：
对后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面。对前面的兄弟元素则无影响。

包含块的变化：
对于脱离文档流的元素（如浮动的元素、绝对定位的元素），其包含块是第一个拥有定位属性（包括绝对定位和相对定位）的祖先元素。如果所有祖先元素都没有定位，则包含块是整个页面。

与定位元素的互斥：
绝对定位、浮动不能同时设置。若同时设置，浮动失效，以定位为主。这表明浮动和绝对定位在功能上是互斥的。

对父元素和布局的影响：
浮动元素可能会导致其父元素的高度塌陷，因为浮动元素脱离了文档流，不再撑开父元素。这通常需要清除浮动来修正布局问题。

-->